import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  changeCreate,
  changeParams,
  getGearListAsync,
} from "@/store/withdrawGear/withdrawGearSlice";
import { Button, Table } from "antd";
import type { TableProps } from "antd";
import type { ReactElement } from "react";

export interface DataType {
  uuid: string,
  cash: number;
  channel: number;
  count: number;
  country: string;
  discount: number;
  gear_id: number;
  status: number;
  token_symbol: string;
  wd_way: number;
}
export default function MTable(): ReactElement<typeof Table, "table"> {
  const { params, table } = useAppSelector((state) => state.withdrawGear);
  const dispatch = useAppDispatch();
  const { config } = useAppSelector((state) => state.app);
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "渠道",
      dataIndex: "channel",
      key: "channel",
      align: "center",
      render: (text) =>
        config?.data?.data?.user_channel_list?.find?.((i) => i.value == text)
          ?.label,
    },
    {
      title: "地区",
      dataIndex: "country",
      key: "country",
      align: "center",
      render: (text) =>
        config?.data?.data?.wd_country_conf?.find?.((i) => i.value == text)
          ?.label,
    },
    {
      title: "提现平台",
      dataIndex: "wd_way",
      key: "wd_way",
      align: "center",
      render: (text) =>
        config?.data?.data?.wd_way_conf?.find?.((i) => i.value == text)?.label,
    },
    {
      title: "货币符号",
      dataIndex: "token_symbol",
      key: "token_symbol",
      align: "center",
    },
    {
      title: "折扣",
      dataIndex: "discount",
      key: "discount",
      align: "center",
      render: text => `${text}%`
    },
    {
      title: "提现次数",
      dataIndex: "count",
      key: "count",
      align: "center",
    },
    {
      title: "金额(真实金额*100)",
      dataIndex: "cash",
      key: "cash",
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      align: "center",
      render: (text) => config?.data?.data?.switch_conf?.find?.((i) => i.value == text)?.label,
    },
    {
      title: "操作",
      dataIndex: "opt",
      key: "opt",
      align: "center",
      render: (_text, record) => {
        return (
          <Button.Group size="small">
            <Button type="primary" ghost onClick={() => {
              dispatch(changeCreate({
                type: 'update',
                open: true,
                record
              }))
            }}>编辑</Button>
          </Button.Group>
        );
      },
    },
  ];
  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.total,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getGearListAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.page_data || []}
      size="small"
      rowKey="uuid"
    />
  );
}
